<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.js"></script>
</head>
<body>
  <div id="app">
    <parent-com></parent-com>
  </div>
</body>
<template id="parent">
  <div>
    <h1>父组件</h1>
    <child-com></child-com>
  </div>
</template>
<template id="child">
  <div>
    <h3>子组件 - {{ msg }}</h3>
  </div>
</template>
<script>
  // 谁用谁注册
  const childCom = {
    template: '#child',
    inject: ['msg']
  }
  const ParentCom = {
    template: '#parent',
    components: {
      childCom // 对象内部 key 和value相同且value值是一个变量，可以采用简写形式 
    }
  }
  new Vue({
    el: '#app',
    provide: {
      msg: 'abcd'
    },
    components: {
      ParentCom: ParentCom
    }
  })
</script>
</html>